<template>
  <el-form ref="genInfoForm" :model="info" :rules="rules" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="genTemplate">
          <span slot="label">生成模板</span>
          <el-select v-model="info.genTemplate" @change="tplSelectChange">
            <el-option v-for="dict in dict.type.gen_template" :key="dict.value" :label="dict.label"
                       :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="genPackagePath">
          <span slot="label">
            生成包路径
            <el-tooltip content="生成在哪个java包下，例如 com.ruoyi.system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.genPackagePath"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genModuleName">
          <span slot="label">
            生成模块名
            <el-tooltip content="可理解为子系统名，例如 system" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.genModuleName"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genBusinessName">
          <span slot="label">
            生成业务名
            <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.genBusinessName"/>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genWay">
          <span slot="label">
            生成代码方式
            <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-radio v-model="info.genWay" v-for="dict in dict.type.gen_way" :key="dict.value" :label="dict.value">{{
              dict.label
            }}
          </el-radio>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item>
          <span slot="label">
            上级菜单
            <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <treeselect
              :append-to-body="true"
              v-model="info.menuId"
              :options="menus"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="请选择系统菜单"
          />
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="info.genWay == '1'">
        <el-form-item prop="customPath">
          <span slot="label">
            自定义路径
            <el-tooltip content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </span>
          <el-input v-model="info.customPath">
            <el-dropdown slot="append">
              <el-button type="primary">
                最近路径快速选择
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="info.customPath = '/'">恢复默认的生成基础路径</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: {Treeselect},
  dicts: ['gen_way', 'gen_template'],
  props: {
    info: {
      type: Object,
      default: null
    },
    tables: {
      type: Array,
      default: null
    },
    menus: {
      type: Array,
      default: []
    },
  },
  data() {
    return {
      subColumns: [],
      rules: {
        genTemplate: [
          {required: true, message: "请选择生成模板", trigger: "blur"}
        ],
        genPackagePath: [
          {required: true, message: "请输入生成包路径", trigger: "blur"}
        ],
        genModuleName: [
          {required: true, message: "请输入生成模块名", trigger: "blur"}
        ],
        genBusinessName: [
          {required: true, message: "请输入生成业务名", trigger: "blur"}
        ],
      }
    };
  },
  watch: {
    'info.subTableName': function (val) {
      this.setSubTableColumns(val);
    },
    'info.tplWebType': function (val) {
      if (val === '') {
        this.info.tplWebType = "element-ui";
      }
    }
  },
  methods: {
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    /** 选择子表名触发 */
    subSelectChange(value) {
      this.info.subTableFkName = '';
    },
    /** 选择生成模板触发 */
    tplSelectChange(value) {
      if (value !== 'sub') {
        this.info.subTableName = '';
        this.info.subTableFkName = '';
      }
    },
    /** 设置关联外键 */
    setSubTableColumns(value) {
      for (var item in this.tables) {
        const name = this.tables[item].tableName;
        if (value === name) {
          this.subColumns = this.tables[item].columns;
          break;
        }
      }
    }
  }
};
</script>
